<template>
  <div class="product-detail-page">
    <div class="container">
      <div class="breadcrumb">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item>全部</el-breadcrumb-item>
          <el-breadcrumb-item>{{ getCategoryPath() }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ product.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      
      <div class="content">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="10" animated />
        </div>
        
        <!-- 错误状态 -->
        <div v-else-if="loadError" class="error-container">
          <el-empty description="商品信息加载失败">
            <el-button type="primary" @click="fetchProductDetail">重新加载</el-button>
          </el-empty>
        </div>
        
        <!-- 商品详情内容 -->
        <div v-else class="product-content">
          <div class="product-main">
            <div class="product-gallery">
              <!-- 主图展示区域 -->
              <div class="main-image-container">
                <el-carousel 
                  ref="mainCarousel"
                  height="400px" 
                  indicator-position="none"
                  arrow="always"
                  @change="handleMainImageChange"
                >
                  <el-carousel-item 
                    v-for="(image, index) in productImages" 
                    :key="index"
                    class="carousel-item"
                  >
                    <div class="image-wrapper" @click="openImagePreview(index)">
                      <img 
                        :src="image" 
                        :alt="`商品图片${index + 1}`"
                        @error="handleImageError"
                        class="main-image"
                      />
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
              
              <!-- 缩略图导航区域 -->
              <div class="thumbnail-navigation">
                <el-button 
                  v-if="productImages.length > 4" 
                  icon="ArrowLeft" 
                  circle 
                  size="small" 
                  @click="scrollThumbnails('left')"
                  class="nav-btn"
                />
                
                <div class="thumbnail-list" ref="thumbnailList">
                  <div 
                    v-for="(image, index) in productImages" 
                    :key="index"
                    :class="['thumbnail-item', { active: currentImageIndex === index }]"
                    @click="switchToImage(index)"
                  >
                    <img 
                      :src="image" 
                      :alt="`缩略图${index + 1}`" 
                      @error="handleThumbnailError"
                    />
                  </div>
                </div>
                
                <el-button 
                  v-if="productImages.length > 4" 
                  icon="ArrowRight" 
                  circle 
                  size="small" 
                  @click="scrollThumbnails('right')"
                  class="nav-btn"
                />
              </div>
            </div>
            
            <div class="product-info">
              <h1 class="product-title">{{ product.name }}</h1>
              <p class="product-description">{{ product.description || '暂无描述' }}</p>
              
              <div class="product-price-section">
                <div class="price-row">
                  <span class="label">本店价格：</span>
                  <span class="price">￥{{ product.price }}</span>
                </div>
                <div class="points-row">
                  <span class="label">消费积分：</span>
                  <span class="points">{{ Math.floor(product.price / 10) }}R</span>
                </div>
              </div>
              
              <div class="product-options">
                <div class="option-group">
                  <span class="option-label">型号：</span>
                  <div class="option-items">
                    <div 
                      v-for="(model, index) in productModels" 
                      :key="index"
                      :class="['option-item', { active: selectedModelIndex === index }]"
                      @click="selectModel(index)"
                    >
                      {{ model.name }}
                    </div>
                  </div>
                </div>
                
                <div class="option-group">
                  <span class="option-label">颜色：</span>
                  <div class="option-items">
                    <div 
                      v-for="(color, index) in productColors" 
                      :key="index"
                      :class="['option-item', { active: selectedColorIndex === index }]"
                      @click="selectColor(index)"
                    >
                      {{ color.name }}
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="product-actions">
                <div class="quantity-selector">
                  <span class="label">数量：</span>
                  <div class="quantity-control">
                    <el-button 
                      :disabled="quantity <= 1" 
                      @click="decreaseQuantity"
                      icon="Minus"
                      circle
                      size="small"
                    />
                    <span class="quantity-display">{{ quantity }}</span>
                    <el-button 
                      :disabled="quantity >= product.stock" 
                      @click="increaseQuantity"
                      icon="Plus"
                      circle
                      size="small"
                    />
                  </div>
                  <span class="stock-info">库存：{{ product.stock }}件</span>
                </div>
                
                <div class="action-buttons">
                  <el-button 
                    type="primary" 
                    size="large" 
                    @click="addToCart"
                    class="add-to-cart-btn"
                  >
                    加入购物车
                  </el-button>
                  <el-button 
                    type="danger" 
                    size="large" 
                    @click="buyNow"
                    class="buy-now-btn"
                  >
                    立即购买
                  </el-button>
                  <el-button 
                    :type="isFavorited ? 'danger' : 'default'" 
                    size="large" 
                    @click="toggleFavorite"
                    class="favorite-btn"
                  >
                    {{ isFavorited ? '已收藏' : '收藏商品' }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="product-details-section">
            <el-tabs v-model="activeTab" class="detail-tabs">
              <el-tab-pane label="商品属性" name="attribute">
                <div class="attributes-table">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <div class="attribute-item">
                        <span class="attr-label">商品名称：</span>
                        <span class="attr-value">{{ product.name }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="attribute-item">
                        <span class="attr-label">商品编号：</span>
                        <span class="attr-value">{{ product.id }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="attribute-item">
                        <span class="attr-label">库存：</span>
                        <span class="attr-value">{{ product.stock }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="attribute-item">
                        <span class="attr-label">价格：</span>
                        <span class="attr-value price-text">￥{{ product.price }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="商品详情" name="detail">
                <div class="product-detail-content">
                  <div class="detail-intro">
                    <h3>{{ product.name }}</h3>
                    <div class="description-box">
                      <p>{{ product.description || '暂无描述' }}</p>
                    </div>
                  </div>
                  
                  <div class="detail-images">
                    <div 
                      v-for="(image, index) in detailImages" 
                      :key="index"
                      class="detail-image-item"
                    >
                      <img :src="image" alt="商品详情图" />
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      
      <div class="navigation-buttons">
        <el-button @click="$router.go(-1)" icon="ArrowLeft">返回上一页</el-button>
        <el-button type="primary" @click="$router.push('/')" icon="HomeFilled">返回首页</el-button>
      </div>
    </div>
    
    <!-- 图片预览 -->
    <el-dialog
      v-model="imagePreviewVisible"
      fullscreen
      class="image-preview-dialog"
    >
      <div class="preview-content">
        <el-carousel 
          ref="previewCarousel"
          height="100%" 
          indicator-position="outside"
          arrow="always"
          :initial-index="previewImageIndex"
        >
          <el-carousel-item 
            v-for="(image, index) in productImages" 
            :key="index"
            class="preview-carousel-item"
          >
            <div class="preview-image-wrapper">
              <img 
                :src="image" 
                :alt="`预览图${index + 1}`"
                class="preview-image"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProduct } from '@/api/productApi'
import { addToCart } from '@/api/cartApi'
import { addFavorite, removeFavorite, getFavorites, getFavoriteItems } from '@/api/favoriteApi'

export default {
  name: 'ProductDetail',
  data() {
    return {
      productId: '',
      product: {
        id: 0,
        name: '',
        description: '',
        price: 0,
        stock: 100,
        categoryLevel1Id: null,
        categoryLevel2Id: null,
        categoryLevel3Id: null,
        fileName: ''
      },
      currentImageIndex: 0,
      quantity: 1,
      activeTab: 'attribute',
      loading: false,
      loadError: false,
      selectedModelIndex: 0,
      selectedColorIndex: 0,
      productModels: [
        { name: '标准版' },
        { name: '豪华版' },
        { name: '旗舰版' }
      ],
      productColors: [
        { name: '默认' },
        { name: '经典' },
        { name: '时尚' }
      ],
      imagePreviewVisible: false,
      previewImageIndex: 0,
      isFavorited: false,
      userId: '',
      isLoggedIn: false,
      defaultCollectId: 'default'
    }
  },
  computed: {
    // 获取商品图片数组
    productImages() {
      // 如果商品有fileName，则使用实际图片，否则使用默认图片
      if (this.product.fileName) {
        try {
          // 尝试加载实际图片
          return [
            require(`@/assets/files/${this.product.fileName}`),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg')
          ]
        } catch (error) {
          // 如果图片加载失败，使用默认图片
          console.warn('商品图片加载失败，使用默认图片:', error)
          return [
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg')
          ]
        }
      } else {
        // 使用默认图片
        return [
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg')
        ]
      }
    },
    
    // 获取详情图片
    detailImages() {
      // 如果商品有fileName，则使用实际图片，否则使用默认图片
      if (this.product.fileName) {
        try {
          // 尝试加载实际图片
          return [
            require(`@/assets/files/${this.product.fileName}`),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg')
          ]
        } catch (error) {
          // 如果图片加载失败，使用默认图片
          console.warn('商品详情图片加载失败，使用默认图片:', error)
          return [
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg'),
            require('@/assets/images/default_product.jpg')
          ]
        }
      } else {
        // 使用默认图片
        return [
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg'),
          require('@/assets/images/default_product.jpg')
        ]
      }
    }
  },
  watch: {
    // 监听路由变化
    '$route.params.id': {
      handler(newId) {
        this.productId = newId || ''
        this.fetchProductDetail()
      },
      immediate: true
    }
  },
  mounted() {
    // 检查用户登录状态
    this.checkLoginStatus()
  },
  methods: {
    // 检查用户登录状态
    checkLoginStatus() {
      const userInfo = localStorage.getItem('userInfo')
      this.isLoggedIn = !!userInfo
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo)
          this.userId = user.id || ''
          // 获取用户的收藏夹
          this.getUserFavorites()
        } catch (e) {
          console.error('解析用户信息失败:', e)
          localStorage.removeItem('userInfo')
        }
      }
    },
    
    // 获取用户收藏夹
    async getUserFavorites() {
      if (this.isLoggedIn && this.userId) {
        try {
          const response = await getFavorites(this.userId)
          // 查找默认收藏夹
          const collects = Array.isArray(response) ? response : response.data || []
          const defaultCollect = collects.find(collect => collect.name === '默认收藏夹')
          if (defaultCollect) {
            this.defaultCollectId = defaultCollect.id
          } else if (collects.length > 0) {
            // 如果没有默认收藏夹，使用第一个收藏夹
            this.defaultCollectId = collects[0].id
          }
          // 检查当前商品是否已收藏
          this.checkFavoriteStatus()
        } catch (error) {
          console.error('获取收藏夹失败:', error)
        }
      }
    },
    
    // 检查商品是否已收藏
    async checkFavoriteStatus() {
      if (this.isLoggedIn && this.userId && this.productId && this.defaultCollectId) {
        try {
          const response = await getFavoriteItems(this.userId, this.defaultCollectId)
          const items = Array.isArray(response) ? response : response.data || []
          // 检查当前商品是否在收藏夹中
          this.isFavorited = items.some(item => item.productId === this.productId)
        } catch (error) {
          console.error('检查收藏状态失败:', error)
          this.isFavorited = false
        }
      }
    },
    
    // 添加到收藏夹
    async toggleFavorite() {
      if (!this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      
      if (!this.product.id) {
        this.$message.error('商品信息不完整')
        return
      }
      
      try {
        if (this.isFavorited) {
          // 如果已收藏，则取消收藏
          await removeFavorite(this.userId, this.product.id, this.defaultCollectId)
          this.isFavorited = false
          this.$message.success('已取消收藏')
        } else {
          // 如果未收藏，则添加收藏
          await addFavorite(this.userId, this.product.id, this.defaultCollectId)
          this.isFavorited = true
          this.$message.success('已添加到收藏夹')
        }
        // 通知收藏夹组件更新
        this.$emit('favorite-updated')
      } catch (error) {
        console.error('收藏操作失败:', error)
        this.$message.error('操作失败: ' + (error.message || '网络错误'))
      }
    },
    
    // 获取商品详情
    async fetchProductDetail() {
      if (!this.productId) return
      
      this.loading = true
      this.loadError = false
      try {
        const res = await getProduct(this.productId)
        console.log('商品详情:', res)
        
        // 重置错误状态
        this.loadError = false
        
        if (res.data) {
          // 确保所有字段都正确映射
          this.product = {
            id: res.data.id || 0,
            name: res.data.name || '',
            description: res.data.description || '',
            price: res.data.price || 0,
            stock: res.data.stock || 100,
            categoryLevel1Id: res.data.categoryLevel1Id || null,
            categoryLevel2Id: res.data.categoryLevel2Id || null,
            categoryLevel3Id: res.data.categoryLevel3Id || null,
            fileName: res.data.fileName || ''
          }
        } else if (res.id) {
          // 如果响应数据直接在res对象中而不是res.data中
          this.product = {
            id: res.id || 0,
            name: res.name || '',
            description: res.description || '',
            price: res.price || 0,
            stock: res.stock || 100,
            categoryLevel1Id: res.categoryLevel1Id || null,
            categoryLevel2Id: res.categoryLevel2Id || null,
            categoryLevel3Id: res.categoryLevel3Id || null,
            fileName: res.fileName || ''
          }
        } else {
          // 如果没有有效的数据，抛出错误
          throw new Error('无效的商品数据格式')
        }
      } catch (error) {
        console.error('获取商品详情失败:', error)
        this.loadError = true
        this.$message.error('获取商品详情失败: ' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    
    // 获取分类路径（简化版，实际项目中应该通过API获取分类名称）
    getCategoryPath() {
      const categories = []
      if (this.product.categoryLevel1Id) {
        categories.push(`一级分类(${this.product.categoryLevel1Id})`)
      }
      if (this.product.categoryLevel2Id) {
        categories.push(`二级分类(${this.product.categoryLevel2Id})`)
      }
      if (this.product.categoryLevel3Id) {
        categories.push(`三级分类(${this.product.categoryLevel3Id})`)
      }
      return categories.join(' > ') || '未分类'
    },
    
    // 主图切换事件
    handleMainImageChange(index) {
      this.currentImageIndex = index
      // 同步缩略图滚动位置
      this.scrollToThumbnail(index)
    },
    
    // 切换到指定图片
    switchToImage(index) {
      this.currentImageIndex = index
      this.$refs.mainCarousel.setActiveItem(index)
    },
    
    // 滚动缩略图
    scrollThumbnails(direction) {
      const thumbnailList = this.$refs.thumbnailList
      const scrollAmount = 100
      
      if (direction === 'left') {
        thumbnailList.scrollLeft -= scrollAmount
      } else {
        thumbnailList.scrollLeft += scrollAmount
      }
    },
    
    // 滚动到指定缩略图
    scrollToThumbnail(index) {
      const thumbnailList = this.$refs.thumbnailList
      const thumbnailWidth = 90 // 包括margin
      const visibleThumbnails = Math.floor(thumbnailList.offsetWidth / thumbnailWidth)
      const startIndex = Math.max(0, index - Math.floor(visibleThumbnails / 2))
      
      thumbnailList.scrollLeft = startIndex * thumbnailWidth
    },
    
    // 增加数量
    increaseQuantity() {
      if (this.quantity < this.product.stock) {
        this.quantity++
      }
    },
    
    // 减少数量
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--
      }
    },
    
    // 添加到收藏夹
    addToFavorites() {
      this.$message.success('已关注商品')
    },
    
    // 加入购物车
    async addToCart() {
      if (!this.product.id) {
        this.$message.error('请选择商品');
        return;
      }
      if (this.quantity <= 0) {
        this.$message.error('请选择正确的数量');
        return;
      }

      // 发送完整的购物车项目信息到后端
      const cartItem = {
        productId: this.product.id.toString(),
        productName: this.product.name,
        quantity: this.quantity,
        price: parseFloat(this.product.price),
        image: this.product.fileName || ''
      };

      try {
        const res = await addToCart(cartItem);
        console.log('加入购物车结果:', res);
        
        // 后端返回的是简单字符串"success"
        if (res === 'success') {
          this.$message.success('添加购物车成功');
          // 发送事件通知购物车更新
          this.$emit('cart-updated');
        } else {
          this.$message.error(res.message || '加入购物车失败');
        }
      } catch (error) {
        console.error('添加购物车失败:', error);
        this.$message.error('添加购物车失败: ' + (error.message || '网络错误'));
      }
    },
    
    // 立即购买
    async buyNow() {
      if (!this.product.id) {
        this.$message.error('请选择商品');
        return;
      }
      if (this.quantity <= 0) {
        this.$message.error('请选择正确的数量');
        return;
      }

      // 发送完整的购物车项目信息到后端
      const cartItem = {
        productId: this.product.id.toString(),
        productName: this.product.name,
        quantity: this.quantity,
        price: parseFloat(this.product.price),
        image: this.product.fileName || ''
      };

      try {
        const res = await addToCart(cartItem);
        console.log('加入购物车结果:', res);
        
        // 后端返回的是简单字符串"success"
        if (res === 'success') {
          this.$message.success('购买成功，正在跳转到购物车...');
          // 跳转到购物车页面
          this.$router.push('/cart');
        } else {
          this.$message.error(res.message || '购买失败');
        }
      } catch (error) {
        console.error('立即购买失败:', error);
        this.$message.error('购买失败: ' + (error.message || '网络错误'));
      }
    },
    
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 处理主图加载错误
    handleImageError(event) {
      event.target.src = require('@/assets/images/default_product.jpg')
    },
    
    // 处理缩略图加载错误
    handleThumbnailError(event) {
      event.target.src = require('@/assets/images/default_product.jpg')
    },
    
    // 选择型号
    selectModel(index) {
      this.selectedModelIndex = index
    },
    
    // 选择颜色
    selectColor(index) {
      this.selectedColorIndex = index
    },
    
    // 打开图片预览
    openImagePreview(index) {
      this.previewImageIndex = index
      this.imagePreviewVisible = true
    }
  }
}
</script>

<style scoped>
@import '@/assets/css/easybuy-style.css';

.product-detail-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.breadcrumb {
  padding: 15px 0;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 20px;
}

.content {
  margin-top: 20px;
}

/* 加载状态 */
.loading-container {
  padding: 50px 0;
  text-align: center;
}

/* 错误状态 */
.error-container {
  padding: 50px 0;
  text-align: center;
}

/* 商品内容区域 */
.product-content {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 商品主信息区域 */
.product-main {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eaeaea;
}

/* 商品图片展示区域 */
.product-gallery {
  flex: 1;
  max-width: 500px;
}

.main-image-container {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f9f9f9;
  margin-bottom: 15px;
}

.carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

/* 商品主图片容器 */
.image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 商品主图片 */
.main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* 缩略图导航区域 */
.thumbnail-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-btn {
  flex-shrink: 0;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 0;
  scrollbar-width: none; /* Firefox */
}

.thumbnail-list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.thumbnail-item {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 2px solid #eaeaea;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
}

.thumbnail-item:hover,
.thumbnail-item.active {
  border-color: #ff4e00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 78, 0, 0.2);
}

.thumbnail-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 商品信息区域 */
.product-info {
  flex: 1;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
}

.product-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.4;
}

.product-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #eaeaea;
}

.product-price-section {
  background-color: #fff9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  border: 1px solid #ffe4e4;
}

.price-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.points-row {
  display: flex;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.price {
  font-size: 28px;
  color: #ff4e00;
  font-weight: bold;
}

.points {
  font-size: 16px;
  color: #ff4e00;
  font-weight: bold;
}

/* 商品选项 */
.product-options {
  margin-bottom: 25px;
}

.option-group {
  margin-bottom: 15px;
}

.option-label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-right: 15px;
}

.option-items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.option-item {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
}

.option-item:hover {
  border-color: #ff4e00;
  background-color: #fff5f5;
}

.option-item.active {
  border-color: #ff4e00;
  background-color: #ff4e00;
  color: #fff;
  font-weight: bold;
}

/* 商品操作 */
.product-actions {
  padding-top: 20px;
  border-top: 1px dashed #eaeaea;
}

.quantity-selector {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 15px;
}

.quantity-display {
  min-width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.stock-info {
  color: #666;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.add-to-cart-btn,
.buy-now-btn,
.favorite-btn {
  flex: 1;
  height: 45px;
  font-size: 16px;
}

/* 商品详情区域 */
.product-details-section {
  margin-top: 30px;
}

.detail-tabs {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.detail-tabs :deep(.el-tabs__header) {
  margin-bottom: 0;
}

.detail-tabs :deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

.detail-tabs :deep(.el-tabs__item) {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
}

.detail-tabs :deep(.el-tabs__item:hover) {
  color: #ff4e00;
}

.detail-tabs :deep(.el-tabs__item.is-active) {
  color: #ff4e00;
  font-weight: 600;
}

.detail-tabs :deep(.el-tabs__active-bar) {
  background-color: #ff4e00;
  height: 3px;
}

.detail-tabs :deep(.el-tabs__content) {
  padding: 25px;
  background-color: #fff;
}

.attributes-table {
  padding: 10px 0;
}

.attribute-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
}

.attribute-item:last-child {
  border-bottom: none;
}

.attr-label {
  font-weight: 500;
  color: #555;
  margin-right: 15px;
  min-width: 80px;
  flex-shrink: 0;
}

.attr-value {
  color: #333;
  flex: 1;
}

.price-text {
  color: #ff4e00;
  font-weight: 600;
  font-size: 18px;
}

.product-detail-content {
  padding: 10px 0;
}

.detail-intro h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  font-weight: 600;
}

.description-box {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  border-left: 4px solid #ff4e00;
}

.description-box p {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
  margin: 0;
}

.detail-images {
  margin-top: 30px;
}

.detail-image-item {
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
  padding: 15px;
  background-color: #fafafa;
  border-radius: 8px;
}

.detail-image-item img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.detail-image-item img:hover {
  transform: translateY(-5px);
}

/* 导航按钮 */
.navigation-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eaeaea;
}

/* 图片预览对话框 */
.image-preview-dialog {
  background-color: rgba(0, 0, 0, 0.9);
}

.preview-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-main {
    flex-direction: column;
  }
  
  .product-gallery {
    max-width: 100%;
  }
  
  .product-info {
    padding: 15px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .navigation-buttons {
    flex-direction: column;
  }
  
  .detail-image-item img {
    max-width: 100%;
  }
  
  .attribute-item {
    flex-direction: column;
    gap: 8px;
  }
  
  .attr-label {
    min-width: auto;
  }
}
</style>